<template>
    <div class="main">

        <div class="dic_head">
            <div class="dic_add">
                <el-button type="primary" @click="event.Add">新增</el-button>
            </div>
            <div class="search">
                <el-input v-model="data.key" style="width: 350px" size="large" placeholder="请输入关键字查询"
                    :suffix-icon="Search" />
            </div>
        </div>

        <div class="dic_main">
            <el-skeleton animated :rows="8" :loading="data.isFisrt">
                <el-table :data="data.data" v-loading="data.loading" style="width: 100%">
                    <el-table-column label="序号" width="70" type="index">
                    </el-table-column>
                    <el-table-column :show-overflow-tooltip="true" label="产品名称" width="120" prop="pname">

                    </el-table-column>
                    <el-table-column :show-overflow-tooltip="true" label="价格" width="90" prop="pprice">
                        <template #default="scope">
                            <el-tag type="success">￥ {{ scope.row.pprice }}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column :show-overflow-tooltip="true" label="产品类型" width="90" prop="ptname">
                        <template #default="scope">
                            <el-tag type="primary">{{ scope.row.ptname }}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column :show-overflow-tooltip="true" label="产品类别" width="100" prop="ptname">
                        <template #default="scope">
                            <el-tag type="primary">{{ scope.row.ptype === "1" ? '服务类' : '实物类' }}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column :show-overflow-tooltip="true" label="生产日期(创建时间)" width="160" prop="pData">
                        <template #default="scope">
                            <el-tag type="primary">{{ scope.row.pcreatetime == "" ? '无' : scope.row.pcreatetime }}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column :show-overflow-tooltip="true" label="保质期(月)" width="90" prop="pshelf">
                        <template #default="scope">
                            <el-tag type="primary">{{ scope.row.pshelf === 0 ? '无' : scope.row.pshelf }}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column :show-overflow-tooltip="true" label="库存" width="90" prop="psales">
                        <template #default="scope">
                            <el-tag type="primary">{{ scope.row.pCount==0?'不限量':scope.row.pCount}}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column :show-overflow-tooltip="true" label="销量" width="80" prop="psales">
                        <template #default="scope">
                            <el-tag type="danger">{{ scope.row.psales }}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column :show-overflow-tooltip="true" label="是否上架" width="80" prop="pislist">
                        <template #default="scope">
                            <el-tag :type="scope.row.pislist == 0 ? 'primary' : 'success'">{{ scope.row.pislist === 0 ?
                                '否' : '是'
                                }}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column :show-overflow-tooltip="true" label="描述" width="160" prop="psales">
                        <template #default="scope">
                            <el-tag type="primary">{{ scope.row.pexplain==""?'无':scope.row.pexplain }}</el-tag>
                        </template>
                    </el-table-column>

                    <el-table-column label="操作" width="160">
                        <template #default="scope">
                            <el-tooltip class="box-item" effect="light" content="详情" placement="bottom-end">
                                <el-button type="primary" :icon="Edit" circle @click="event.Detail(scope.row.pid)" />
                            </el-tooltip>
                            <el-popconfirm @confirm="event.ispublish(scope.row.pid)" title="确认上架吗？"
                                v-if="scope.row.pislist === 0">
                                <template #reference>
                                    <el-button :icon="Check" type="success" circle>
                                    </el-button>
                                </template>
                            </el-popconfirm>                      
                                <el-popconfirm @confirm="event.ispublish(scope.row.pid)" v-else title="确认下架吗？">
                                    <template #reference>
                                        <el-button :icon="Bottom" type="danger" circle>
                                        </el-button>
                                    </template>
                                </el-popconfirm>
                            <el-tooltip class="box-item" effect="light" content="删除" placement="bottom-end">
                                <el-popconfirm @confirm="event.Delete(scope.row.pid)" title="确认删除吗？">
                                    <template #reference>
                                        <el-button v-if="scope.row.pislist === 0" :icon="Delete" type="danger" circle>
                                        </el-button>
                                    </template>
                                </el-popconfirm>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="table-foot" style="margin-left: 500px; margin-top: 20px;">
                    <el-pagination background size="small" layout="prev, pager, next"
                        v-model:current-page="data.pages!.page" v-model:page-size="data.pages!.limit"
                        :total="data.pages?.total" />
                </div>

            </el-skeleton>


        </div>

    </div>
</template>

<script setup lang="ts">
import type { pro_Dto } from '@/Dto/Request/product/pro';
import { reactive, watchEffect } from 'vue';
import { Bottom, Check, Search } from '@element-plus/icons-vue'
import { Delete_Product, Get_AllPro, Product_Islist } from '@/api/product';
import Api_Code from '@/Dto/Response/Api_code';
import { Edit, Delete } from '@element-plus/icons-vue'
import router from '@/router';
import { msg } from '@/utils/msg';


const data = reactive<pro_Dto>({
    isFisrt: true,
    key: '',
    data: [],
    pages: {
        page: 1,
        limit: 6,
        total: 0
    }

})


const event = {
    //上架/下架
    async ispublish(id: string) {
        const res = await Product_Islist({
            ids: [id]
        })

        if (res.code === Api_Code.ok) {
            data.loading = false
            methods.bind()
            msg(res)
        } else {
            data.loading = false
            msg(res)
        }
    },
    //详情
    Detail(id: string) {
        router.push('/product/prodetail/' + id)
    },
    //删除
    async Delete(id: string) {

        data.loading = true
        const res = await Delete_Product({
            ids: [id]
        })
        if (res.code === Api_Code.ok) {
            data.loading = false
            methods.bind()
            msg(res)
        } else {
            data.loading = false
            msg(res)
        }


    },
    //跳转新增页面
    Add() {
        router.push('/product/addpro')
    }
}
const methods = {

    async bind() {
        data.loading = true;
        const res = await Get_AllPro({
            page: data.pages?.page || 1,
            limit: data.pages?.limit || 10,
            key: data.key || ''
        })
        console.log(res.data,"::::::::::")
        if (res.code === Api_Code.ok) {
            data.data = res.data.data
            data.pages!.total = res.data.total
            data.loading = false;
        }
    }

}

watchEffect(async () => {
    await methods.bind()
    data.isFisrt = false;
})


</script>

<style scoped>
.main {
    width: 100%;
    height: calc(100vh - 150px);
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
    margin: 8PX;
    position: absolute;
}

.dic_head {
    margin: 10px;
    height: 60px;
    border: 1px solid #eee;
    border-radius: 4px;
    display: flex;
}

.dic_add {
    padding-left: 20px;
    padding-top: 12px;
    flex: 1;
}

.search {
    flex: 3;
    line-height: 50px;
}

.dic_main {
    margin: 8px;
}
</style>